<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/common.css" media="all">
    <link rel="stylesheet" href="../viewstyle/css/publicform.css">
    <script src="/js/layui/layui.all.js"></script>
    <script src="/admin/js/token.js"></script>
</head>
<style type="text/css">
    .layui-form-label{
        padding: 9px 10px;
        width: 60px;
    }
</style>

<body>

<div class="layui-fluid">
    <div class="layui-card">
        <form class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">使用状态</label>
                    <div class="layui-inline">
                        <select  lay-verify="required" id="zt" >
                            <option value="">选择状态</option>
                            <option value="未使用">未使用</option>
                            <option value="使用中">使用中</option>
                            <option value="已过期">已过期</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <lable class="layui-form-label">MAC地址</lable>
                    <div class="layui-input-inline">
                        <input type="text" name="" id="mac" value="" placeholder="mac地址"
                               class="layui-input"/>
                    </div>
                </div>


                <div class="layui-inline">
                    <lable class="layui-form-label">密钥</lable>
                    <div class="layui-input-inline">
                        <input type="text" name="" id="miyao" value="" placeholder="密钥"
                               class="layui-input"/>
                    </div>
                </div>

                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="begin" placeholder="开始时间">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="end" placeholder="结束时间">
                    </div>
                </div>

                <div class="layui-inline">
                    <button id="btnsearch" class="layui-btn layuiadmin-btn-admin">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                    </button>
                </div>
            </div>
        </form>

        <div class="layui-card-body">
            <table class="layui-hide" id="station" lay-filter="t"></table>
        </div>
    </div>
</div>
</body>

<script type="text/html" id="delAndEdit">
    {{#if(d.terminal_key_status=='未使用'){  }}
    <input type="button" value="授权" class="layui-btn layui-btn-sm" lay-event="key"/>
    {{# }else{}}
    {{# }}}
</script>
<script>
            var form = layui.form;
            var $ = layui.$;
            var table = layui.table;
            var laydate = layui.laydate;
            var data = layui.data("stationbh");
            // 执行一个laydate实例
            laydate.render({
                elem: '#begin', //指定元素
                type: 'datetime'
            });
            laydate.render({
                elem: '#end', //指定元素
                type: 'datetime'
            });
            table.render({
                elem: "#station",
                url: "/admin/terminal-key/findByStationIdQueryPassword?key_site=" + data.getdata.station_id,
                id: "t",
                toolbar: "#tol",
                cols: [[{
                    title: "编号",
                    field: "terminal_key_id",
                    width: "10%",
                    align: "center"
                }
                    , {
                        title: "mac地址",
                        field: "terminal_mac",
                        width: "15%",
                        align: "center"
                    }
                    , {
                        title: "密钥",
                        field: "terminal_key_value",
                        width: "15%",
                        align: "center"
                    }
                    , {
                        title: "状态",
                        field: "terminal_key_status",
                        width: "10%",
                        align: "center"
                    }
                    , {
                        title: "开始时间",
                        field: "terminal_key_begin_time",
                        width: "20%",
                        align: "center"
                    }
                    , {
                        title: "结束时间",
                        field: "terminal_key_end_time",
                        width: "20%",
                        align: "center"
                    }
                    , {
                        title: "操作",
                        toolbar: "#delAndEdit",
                        width: "10%",
                        align: "center"
                    }
                ]],
                page: true,
            });
            // 按钮的监听事件
            table.on("tool(t)", function (obj) {
                var getdata = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                switch (layEvent) {
                    case "key":
                        layui.data("terminal",{
                            key:"getdata",
                            value:getdata
                        });
                        layer.open({
                            title:"请选择终端",
                            content:"SelectAllTerminal.html",
                            type:2,
                            area:["100%","100%"],
                            end:function () {
                                $(".layui-laypage-btn").click();
                            }
                        })
                        break;
                }
            });
            //搜索的监听时间
            $('#btnsearch').click(function () {
                table.reload('t', {
                    where: {
                        terminal_key_value: $("#miyao").val(),
                        terminal_key_begin_time: $("#begin").val(),
                        terminal_key_end_time: $("#end").val(),
                        terminal_mac: $("#mac").val(),
                        terminal_key_status:$("#zt").val()
                    },
                    page: {
                        curr: 1
                    }
                })
            });

            $(window).keypress(function (event) {
                if(event.which === 13){
                    $('#btnsearch').click();
                }
            })
</script>
</html>
